Skip to main content

Option Activity

This activity allows the user to select from multiple options.

It’s typically used when the app needs the user to choose a specific plan, item, or action.

Inputs​

The OptionActivity expects the following input options:

  • Title (string): The title displayed at the top of the screen to indicate the purpose of the selection.
  • Description (string): Additional context or details for the user about the available options (optional).
  • ButtonCancelText (string): The label for the button to cancel the selection activity.
  • ButtonOKText (string): The label for the button to confirm the selected option and proceed.
  • Options (Array of OptionItem): An array of objects where each object represents an option that the user can select. Each OptionItem contains:
    • key (string): A unique key or identifier for the option.
    • text (string): A description or label for the option. It could also be the image URL when using visual options.

Example Code​

optionActivity: async (data: OptionActivityOptions) => {
  console.log('Option Activity:', data);
  return new Promise<{ action: WorkflowActivityUserAction; result: string }>((resolve) => {
    try {
      RootNavigation.navigate('WorkflowActivityScreen', {
        type: 'option',
        data,
        onConfirm: (result: string) => {
          console.log('Option Activity result:', result);
          resolve({
            action: WorkflowActivityUserAction.OK,
            result,
          });
        },
        onReject: () => {
          console.log('Option Activity result:', 'Rejected');
          resolve({
            action: WorkflowActivityUserAction.Cancel,
            result: '',
          });
        },
      });
    } catch (error) {
      console.error('Navigation error:', error);
      resolve({
        action: WorkflowActivityUserAction.Cancel,
        result: '',
      });
    }
  });
}

Handling and Layout​

When the user navigates to the WorkflowActivityScreen for an OptionActivity, the layout generally includes:

  1. Title: Displayed as the primary heading, guiding the user about the selection being requested.

  2. Description: Displays more details or instructions to clarify the purpose of the selection.

  3. Options List/Carousel: A visual component that displays all the options to the user, enabling them to scroll or swipe through the list of choices.

    • In this example, a carousel layout is used to display options, with images representing each option.
    • The user can scroll through the options and see which one is selected in the carousel.

  4. Action Buttons:

    • Cancel Button: This button allows the user to cancel the selection operation, returning a Cancel action.
    • OK Button: When pressed, it submits the user’s selection and returns an OK action.

Output​

The output for an Option Activity is the key associated with the selected option. If the activity is confirmed, the resolved result will look like this:

{
  action: WorkflowActivityUserAction.OK,
  result: "SelectedOptionKey", // The key of the option selected by the user
}

If the activity is canceled, the resolved result will look like this:

{
  action: WorkflowActivityUserAction.Cancel,
  result: "",
}

Example Layout Code​

Here’s an example layout for handling Option Activity within the screen component:

<View style={[styles.contentContainer, styles.contentContainerOption]}>
  <Text style={styles.subheadingOption}>{toTitleCase(data.title)}</Text>
  <Carousel
    width={screenWidth}
    height={400} // Adjust height based on your image size
    data={data.options}
    renderItem={({ item }) => (
      <View style={styles.carouselItem}>
        <Image source={{ uri: item.text }} style={styles.carouselImage} resizeMode="contain" />
      </View>
    )}
    scrollAnimationDuration={0}
    onSnapToItem={index => setSelectedIndexCarousel(index)}
  />
  <Text style={styles.optionCounter}>
    Option {selectedIndexCarousel + 1} of {data.options.length}
  </Text>
  <View style={styles.carouselImageCaptionContainer}>
    <Text style={styles.carouselCaptionLabel}>Selected Option: </Text>
    <Text style={styles.carouselImageCaption}>{data.options[selectedIndexCarousel]?.key}</Text>
  </View>
  <View style={styles.actionButtonsContainer}>
    <TouchableOpacity onPress={handleCancel} style={styles.button}>
      <Text style={styles.actionButtonText}>{data.buttonCancelText}</Text>
    </TouchableOpacity>
    <TouchableOpacity onPress={handleConfirm} style={styles.button}>
      <Text style={styles.actionButtonText}>{data.buttonOKText}</Text>
    </TouchableOpacity>
  </View>
</View>
X

Graph View